<template>
  <div>
    <!-- <el-button class="filter-item" size="mini" type="primary" @click="jionRoom()" icon="el-icon-plus">加入房间</el-button -->

    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" border>
      <el-table-column type="selection" width="50"/>
      <el-table-column prop="taskName" label="任务名称" align="center" >
        </el-table-column>
      <el-table-column  prop="unitName"  align="center"label="分队名称" >
      </el-table-column>
      <el-table-column prop="sceneName" label="场景名称" align="center" >
      </el-table-column>
      <el-table-column prop="roomName" label="房间名称" align="center" />
       <el-table-column prop="taskDifficulty" label="难易程度" align="center" />
      <el-table-column prop="participantPopulation" label="参战人数" align="center" >
      </el-table-column>
      <el-table-column prop="hadJoinUserNumber" label="参战人数" align="center">
        <template slot-scope="scope">
            <span style="color: red;">{{scope.row.hadJoinUserNumber}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {getUser} from '@/api/framework/server/server'
  import SockJS from "sockjs-client";
  import Stomp from "stompjs";
  import {getToken} from '@/utils/auth'
  import {mapGetters} from "vuex";
  import initData from '@/mixins/initData'

  export default {
     mixins: [initData],
    data() {
      return {
        loading: false,
        number:0,
        client:null
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    mounted() {
      this.initWebSocket()
    },
    beforeDestroy() {
      // 页面离开时断开连接,清除定时器
      this.disconnect()
      clearInterval(this.timer)
    },
    methods: {
      beforeInit() {
        this.url = 'vrTask/taskWithRoom'
        this.params = { page: this.page, size: this.size}
        return true
      },
      initWebSocket() {
        // 建立连接对象
        const socket = new SockJS(this.baseApi + '/websocket')
        // 获取STOMP子协议的客户端对象
        this.client = Stomp.over(socket)
        this.client.connect({}, (frame) => {
            //console.info("服务端已连接：", frame)
            this.client.subscribe('/topic/roomData', (res) => {
              var dataList = JSON.parse(res.body)
              this.data=dataList.content
            })
        })
      },
      disconnect() {
        if (this.stompClient) {
          this.stompClient.disconnect()
        }
      }
    }

  }
</script>

<style>
</style>
